<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>二维码抽奖</title>
  <style>
    ::-webkit-scrollbar {
      display: none; }

    html,
    body {
      width: 100%;
      height: 100%;
      background-color: #fff; }

    body {
      margin: 0;
      -webkit-overflow-scrolling: touch;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      word-wrap: break-word;
      color: #333;
      font: 14px/1.3 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', STXihei, '\534E\6587\7EC6\9ED1', Roboto, Noto, arial, sans-serif; }

    a {
      text-decoration: none;
      color: inherit;
      -webkit-tap-highlight-color: transparent; }

    img {
      -webkit-tap-highlight-color: transparent; }

    strong,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: 400; }

    em {
      font-style: normal; }

    ol, ul, dl, dd, h1, h2, h3, h4, h5, h6, p {
      margin: 0;
      padding: 0; }

    ul, ol {
      list-style: none; }

    button, input, textarea {
      -webkit-appearance: none;
      font-size: inherit;
      font-family: inherit;
      color: inherit;
      outline: 0;
      padding: 0;
      margin: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border: 0 none;
      -webkit-tap-highlight-color: transparent;
      resize: none; }

    input[disabled], textarea[disabled] {
      background-color: #b2b2b2;
      color: #fff; }

    button[disabled] {
      opacity: 0.5; }

    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px white inset; }

    .wrapper {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      max-width: 640px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }

    .btn {
      box-sizing: border-box;
      display: inline-block;
      border-radius: 3px;
      font-size: 14px; }
    .btn.btn-red {
      border: 1px solid #eb5169;
      background-color: #eb5169;
      color: #fff; }
    .btn.btn-white {
      border: 1px solid #eb5169;
      background-color: #fff;
      color: #eb5169; }
    .btn.btn-disabled {
      background-color: #e5e5e5;
      color: #666; }
    .btn.btn-pale-red {
      border: 1px solid #ff5151;
      background-color: #ff5151;
      color: #fff; }
    .guest-nowin-wrapper {
      background-position: 50% 0;
      background-repeat: no-repeat;
      background-size: 100%;
      height: 100%;
      background-color: #df2023;
      text-align: center;
      color: #fff; }
    .guest-nowin-wrapper .content {
      width: 94%;
      position: absolute;
      left: 0;
      top: 55%;
      z-index: 1;
      padding: 0 3%; }
    .guest-nowin-wrapper .name {
      font-size: 20px;
      margin-bottom: 10px; }
    .guest-nowin-wrapper em {
      color: #ffda23; }
    .guest-nowin-wrapper .form {
      position: absolute;
      top: 70%;
      left: 10%;
      width: 80%;
      color: #333; }
    .guest-nowin-wrapper input {
      background-color: #bb2e2d;
      border-radius: 3px;
      padding: 10px;
      width: 100%;
      margin-bottom: 10px;
      color: #fff;
      height: 35px; }
    .guest-nowin-wrapper .code {
      position: relative;
      margin-bottom: 10px; }
    .guest-nowin-wrapper .code input {
      margin-bottom: 0; }
    .guest-nowin-wrapper .btn-code {
      background-color: #ab2b2a;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      padding: 0 10px;
      line-height: 35px;
      color: #fff;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px; }
    .guest-nowin-wrapper .submit {
      color: #d65d18;
      width: 60%;
      padding: 10px 8px 10px 10px;
      background-color: #ffe641;
      border-radius: 5px;
      box-shadow: 0 3px 0 #d9c119; }
  </style>
</head>
<body>
<div id="qrCode" class="container">
  <div class="wrapper guest-nowin-wrapper" style="background-image: url('bg_nowin.png');">
     <article class="content">
      <p><img style="margin-top:16%;" alt="" src="/misc/app/html/qrcode.png"></p>
    </article>
  </div>
</div>
<script>
  ;(function(){
	  function getSearch(str){
	  	var searchArr = str.split("&"),
	  		obj = {};
	  	
	  	for(var i = 0, l = searchArr.length; i < l; i++){
	  		var currArr = searchArr[i].split("=");
	  		
	  		obj[currArr[0]] = currArr[1];
	  	}
	  	
	  	return obj;
	  }
	  
	  var search = window.location.search.replace("?", ""),
	  	imgSrc = getSearch(search)['img'];
	  
	  if(imgSrc){
		  document.querySelector(".guest-nowin-wrapper").style.backgroundImage = "url("+imgSrc+")";
	  }
	  
  })();
  </script>
</body>
</html>
